<template>
	<div class="p-10px">
		<div class="test">
			<el-form v-show="true" :model="queryParams" :inline="true" style="width: 96.5%">

				<el-form-item label="事故编号：" prop="ID" class="screen">
					<el-input v-model.trim="queryParams.ID" placeholder="请输入事故编号" clearable />
				</el-form-item>
				<el-form-item label="事故名称：" prop="accidename" class="screen">
					<el-input v-model.trim="queryParams.accidename" placeholder="请输入事故名称" clearable />
				</el-form-item>

				<el-form-item label="事故类型：" prop="acctype" class="screen">
					<el-select v-model="queryParams.acctype" placeholder="请选择事故类型">
						<el-option v-for="item in acctypes" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>


				<el-form-item label="事故日期：" class="screen">
					<el-date-picker v-model="queryParams.Accidevents" value-format="YYYY-MM-DD" type="date"
						placeholder="请选择事故日期" />
				</el-form-item>

				<el-form-item label="事故地点：" prop="accidenttion" class="screen">
					<el-input v-model.trim="queryParams.accidenttion" placeholder="请输入事故地点" clearable />
				</el-form-item>


				<el-row :gutter="10">
					<el-form-item>
						<el-col :span="1.5">
							<el-button type="primary" @click="handleQuery()" class="buttonscreen">搜索</el-button>
						</el-col>
						<el-col :span="1.5">
							<el-button @click="resetQuery" class="buttonrest">重置</el-button>
						</el-col>
					</el-form-item>
				</el-row>
			</el-form>
			<el-table :data="
          publists.slice(
            (queryPage.page - 1) * queryPage.pagesize,
            queryPage.page * queryPage.pagesize
          )
        " style="width: 100%;" :header-cell-style="{
          background: '#F5F7FA',
          color: '#333333',
          height: '27pt',
        }" border empty-text="暂无记录">
				<el-table-column prop="ID" label="事故编号" align="center" />
				<el-table-column prop="accidename" label="事故名称" align="center" />
				<el-table-column prop="acctype" label="事故类型" align="center">
					<template #default="{ row }">
						{{ acctype[row.acctype] }}
					</template>
				</el-table-column>
				<el-table-column prop="accidevents" label="事故日期" align="center" />
				<el-table-column prop="accidenttion" label="事故地点" align="center" />
				<el-table-column prop="proceports" label="处理报告" align="center">
					<template #default="{ row }">
						<el-button v-if="row.proceports" link type="primary"
							@click="downloadreport(row.proceports,row.accidename)">下载报告</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-block" style="margin-top: 1.5%">
				<span style="margin-right: 1%; color: #a7a7a7; font-size: 11px">共计{{ publists.length }}条</span>
				<el-config-provider :locale="locale">
					<el-pagination :locale="locale" v-model:current-page="queryPage.page"
						v-model:page-size="queryPage.pagesize" :page-sizes="[5, 10, 15, 20]" :small="true"
						:disabled="disabled" :background="background" layout="sizes, prev,pager,next,jumper"
						prev-text="上一页" next-text="下一页" :total="publists.length" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</el-config-provider>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		defineExpose,
		computed
	} from "vue";
	import {
		publist
	} from "../../../api/o_user/TAHRS/index.js";

	const acctype = {
		0: "轻微事故",
		1: "小型事故",
		2: "一般事故",
		3: "大型事故",
		4: "重大事故",
	};

	const acctypes = ref([{
			value: "0",
			label: "轻微事故"
		},
		{
			value: "1",
			label: "小型事故"
		},
		{
			value: "2",
			label: "一般事故"
		},
		{
			value: "3",
			label: "大型事故"
		},
		{
			value: "4",
			label: "重大事故"
		},
	]);

	/*查询模块*/
	const queryParams = reactive({
		ID: "", //事故编号
		accidename: "", //事故名称
		acctype: "", //事故类型
		Accidevents: "", //事故日期
		accidenttion: "", //事故地点
	});

	const queryPage = reactive({
		page: 1,
		pagesize: 5,
	});

	const publists = reactive([]);

	//备份数据
	const bakQueryParams = JSON.stringify(queryParams);
	//查询
	async function handleQuery() {
		const records = await publist(queryParams);
		publists.splice(0, publists.length); // 清空数组
		publists.push(
			...records.data.map((record) => {
				if (record.accidevents) {
					let eventDate = new Date(record.accidevents);
					eventDate.setDate(eventDate.getDate() + 1);
					record.accidevents = eventDate.toISOString().substring(0, 10);
				}
				return record;
			})
		);
		console.log(publists);
	}

	const handleSizeChange = (val) => {
		queryPage.pagesize = val;
		handleQuery();
	};
	const handleCurrentChange = (val) => {
		queryPage.page = val;
	};

	//重置
	const resetQuery = () => {
		Object.assign(queryParams, JSON.parse(bakQueryParams));
		handleQuery();
	};

	onMounted(() => {
		handleQuery();
	});

	function downloadreport(file, name) {
		window.open(
			"http://localhost:8086/view?relativePath=" + file + "&Filename=" + name
		);
	}

	defineExpose({
		handleQuery
	});
</script>

<style scoped lang="scss">
	.wi {
		width: 200px;
	}

	.wl {
		width: 240px;
	}

	.p-10px {
		width: 100%;
		height: 100vh;
		background-color: white;
		position: relative;
		overflow: auto;
	}

	.buttonset,
	.buttonscreen,
	.buttonrest,
	.screen {
		margin-bottom: 15px;
		border: 0;
	}

	.buttonscreen {
		background-color: #426666;
		color: white;
	}

	.buttonrest {
		background-color: #f39939;
		color: white;
	}

	.buttonset {
		background-color: #3cb035;
		color: white;
	}

	.test {
		position: absolute;
		width: 95%;
		height: 95%;
		margin-left: 2.5%;
		margin-top: 10pt;
	}

	.screen {
		width: 80%;
	}

	.pagination-block {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.el-message-box__message {
		text-align: center;
	}
</style>